<template>
  <div class="basic_wrap">
    <div class="newTitle">
      <img src="@/assets/img/leftGray.png" class="backIcon" @click="$router.back()">
      <div class="title"></div>
    </div>
    <div class="cont">
      <div class="bIconT">身份认证</div>
      <div class="inputWrap">
        <input type="text" placeholder="请输入姓名" v-model="name">
        <input type="text" placeholder="请输入身份证号" v-model="idcard">
      </div>
      <div class="btnWrap">
        <div class="btn" @click="toSure">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import Fetch from '../../utils/fetch'
import Clipboard from "v-clipboard";
import QRCode from 'qrcodejs2'
import {
  Icon,
  List,
  Empty,
  Popup
} from "vant";
Vue.use(Icon).use(Clipboard).use(List).use(Empty).use(Popup);
export default {
  name: "team",
  data() {
    return {
      name:'',
      idcard:'',
      isLoading:false
    };
  },
  created() {
    this.$parent.footer('user', false);
  },
  mounted() {

  },
  methods:{
    validateIDCard(idCard) {
      let regExp = /^([1-9]\d{5}(18|19|([23]\d))\d{2}(0\d|1[012])(0\d|[12]\d|3[01])\d{3}[0-9Xx])$/;
      return regExp.test(idCard);
    },
    toSure(){
      if(this.isLoading){
        return
      }
      if(this.validateIDCard(this.idcard)){
        this.isLoading = true
        Fetch('/user/auth',{
          name:this.name,
          idcard:this.idcard
        }).then((r) => {
          this.isLoading = false
          this.$toast('认证成功');
          setTimeout(()=>{
            this.$router.go(-1);
          },1000)
        }).catch(e=>{
          this.isLoading = false
        });
      }else {
        this.$toast('请输入正确的身份证号码');
      }
    },
  },
};
</script>

<style lang="less" scoped>
   .basic_wrap{
     background-image: url(../../assets/img/otherBac.png);
     background-size: cover;
     background-position: center top;
     min-height: 100vh;
     width: 100vw;
     box-sizing: border-box;
     .newTitle{
       height: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
       position: relative;
       .backIcon{
         position: absolute;
         top: 50%;
         left: 20px;
         transform: translate(-50%,-50%);
         width: 16px;
         height: 16px;
       }
       .title{
         font-size: 16px;
         font-weight: bold;
       }
     }
     .cont{
       display: flex;
       align-items: center;
       flex-direction: column;
       justify-content: center;
       margin-top: 23px;
        .bIconT{
            font-size: 18px;
            font-weight: bold;
        }
       .inputWrap{
         display: flex;
         align-items: center;
         flex-direction: column;
         justify-content: center;
         margin-top: 50px;
          input{
            width: 80vw;
            height: 40px;
            border-radius: 8px;
            background: #ffffff;
            margin-bottom: 20px;
            padding-left: 10px;
          }
       }
       .btnWrap{
         margin-top: 200px;
         .btn{
           width: 40vw;
           height: 40px;
           background: linear-gradient(90deg, #018DFF 0%, #0039FF 100%);
           border-radius: 8px;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 14px;
           color: #ffffff;
         }
       }
     }
   }
</style>
